<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2021/10/5
  Time: 15:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/js/bootstrap-5.1.1-dist/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-5.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/houses/house1.css">
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=BkbUv2S7zTHVFf8dhiBQz4t2hI2CZNih"></script>
</head>
<style>
    .ig{
        position: absolute;
        margin-left: 455px;
    }
    .btn{
        position: absolute;
        height: 130px;
        width: 80px;
        background:rgba(0,0,0,0.4);
        color: #fff;
        text-align: center;
        line-height: 130px;
        font-size: 70px;
        top: 175px;
        cursor: pointer; /*放上鼠标变成一个手的形状*/
        /*display: none;*/
    }
    .btn2{
        left: 1100px;
    }

</style>
<body>

<!--顶部-->
<div class="nav">
    <div class="head-logo">
        <a href="" ></a>
    </div>
    <div class="head-nav">
        <ul>
            <li><a href="${pageContext.request.contextPath}/index" class="first-item">首页</a> </li>
            <li><a href="">手机端</a> </li>
            <c:if test="${empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/users/login.jsp">成为房东</a> </li>
            </c:if>
            <c:if test="${!empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/house_owner/houseadd.jsp">成为房东</a> </li>
            </c:if>
            <c:if test="${empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/users/login.jsp">房源订单中心</a> </li>
            </c:if>
            <c:if test="${!empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/index/order">房源订单中心</a> </li>
            </c:if>
            <c:if test="${empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/users/login.jsp">个人中心</a> </li>
            </c:if>
            <c:if test="${!empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/index/personalCenter">个人中心</a> </li>
            </c:if>
            <li><a href="">帮助</a> </li>
        </ul>
    </div>
    <div class="head-login">
        <c:if test="${empty loginCustomer}">
            <a href="${pageContext.request.contextPath}/users/login.jsp">
                <img class="login-logo" src="${pageContext.request.contextPath}/image/login-logo.svg"/>
                <span class="login-title">登录</span>
            </a>
            <a href="">
                <img class="regist-logo" src="${pageContext.request.contextPath}/image/regist-logo.svg" >
                <span class="login-title">注册</span>
            </a>
        </c:if>
        <c:if test="${!empty loginCustomer}">
            欢迎${loginCustomer.cusNickname}登录，<a href="${pageContext.request.contextPath}/logout">退出</a>
        </c:if>

    </div>
</div>
<!--中间-->
<div class="main">
    <!--房屋图片-->
    <div class="main_img">
        <ul style="width: 3200px">
            <li style="width: 375px" class="ig">
                <img src="${serviceResponse.data.hotelPicture1}"
                     style="background-size: cover;background-repeat: no-repeat;width: 575px;height: 385px;">
            </li>
            <li style="width: 375px" class="ig">
                <img src="${serviceResponse.data.hotelPicture3}"
                     style="background-size: cover;background-repeat: no-repeat;width: 575px;height: 385px;"></li>
            <li style="width: 375px" class="ig">
                <img src="${serviceResponse.data.hotelPicture2}"
                     style="background-size: cover;background-repeat: no-repeat;width: 575px;height: 385px;"></li>
            <li style="width: 375px" class="ig">
                <img src="${serviceResponse.data.hotelPicture4}"
                     style="background-size: cover;background-repeat: no-repeat;width: 575px;height: 385px;"></li>
        </ul>
        <div class="btn btn1" style="margin-left: 300px"><</div>
        <div class="btn btn2">></div>
    </div>
    <!--房屋简介-->
    <div class="main_manage">
        <div class="row row1">
            <div class="col-md-8 col1">
                <a href="" class="house_name">${serviceResponse.data.hotelName}</a>
                <div class="house_span">
                    <span class="house_address">地址：</span>
                    <span >${serviceResponse.data.hotelAddress}</span>
                </div>
                <div class="house_content">
                    <ul>
                        <li class="hx">
                            <img src="${pageContext.request.contextPath}/image/room_hx.png"><br/>
                            <span>${serviceResponse.data.hotelType}</span>
                        </li>
                        <li class="cz">
                            <img src="${pageContext.request.contextPath}/image/room_house.png"><br/>
                            <span>整租</span>
                        </li>
                        <li class="bed">
                            <img src="${pageContext.request.contextPath}/image/room_bed.png"><br/>
                            <span>2张</span>
                        </li>
                        <li class="people">
                            <img src="${pageContext.request.contextPath}/image/room_yzrs.png"><br/>
                            <span>宜住4人</span>
                        </li>
                        <li class="hp">
                            <span class="house_nr">100%</span><br/>
                            <span class="house_pj">好评率</span>
                        </li>
                        <li class="yd">
                            <span class="house_nr">30晚</span><br/>
                            <span class="house_pj">近期预定</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-1 col1">
            </div>
            <div class="col-md-3 col1">

                    <div class="yuding">
                        <span >￥</span>
                        <span >${serviceResponse.data.hotelPrice}</span>
                        <span >每晚</span>

                    </div>
                <form method="post" action="${pageContext.request.contextPath}/saveorder">
                    <input type="date" id="newtoday" name="orderStartDate"/> <br/>
                    <input type="date" id="newtoday" name="orderEndDate"/><br/>
                    <input type="hidden" name="hotelId" value="${serviceResponse.data.hotelId}"/>

                    <input type="hidden" name="orderPrice" value="${serviceResponse.data.hotelPrice}"/>
                    <input  class="yuding" type="submit"  value="立即预定"/>

                      <%--  <a href="${pageContext.request.contextPath}/hotel/${serviceResponse.data.hotelId}">立即预定</a>--%>
                  </form>
            </div>
        </div>
    </div>
    <!--房屋详情-->
    <div class="main_content">
        <div class="house_title">
            <ul>
                <li>房间信息</li>
                <li>配套设施</li>
                <li>周边设施</li>
                <li>地理位置</li>
                <li>交易规则</li>
                <li>建筑地标</li>
                <li>要求及收费</li>
            </ul>
        </div>
        <div class="house_information">
            <label>关于此房源</label>
            <div class="house_news" style="text-indent: 2em;">
                新房复式公寓，房间装修精装简约而干净，非常舒适舒心，楼上干湿分离卫生间，两个独立房间，楼下厨房和客厅，家具电器全新，一应俱全。指纹门锁，刷卡电梯。
                地理位置非常优越，处于苏州工业园区北，位于金鸡湖五星景区与阳澄湖半岛中间，离双湖钧在五公里左右，离华宜影城6公里左右，离园区湖东CBD五公里。公寓附近配套设施齐全，附近800米内有多个餐饮娱乐广场，离医院800米，楼下有大超市，非常适合商旅度假！
            </div>
        </div>
        <div class="house_nr">
            <ul>
                <li>
                    <span class="house_ioc_title">房源类型：</span>
                    <span class="house_ioc_context">${serviceResponse.data.hotelTopic}</span>
                </li>
                <li>
                    <span class="house_ioc_title">户型：</span>
                    <span class="house_ioc_context">${serviceResponse.data.roomType}</span>
                </li>
                <li>
                    <span class="house_ioc_title">出租类型：</span>
                    <span class="house_ioc_context">整租</span>
                </li>
                <li>
                    <span class="house_ioc_title">床型：</span>
                    <span class="house_ioc_context">双人床 双人床</span>
                </li>
                <li>
                    <span class="house_ioc_title">总床数：</span>
                    <span class="house_ioc_context">2张</span>
                </li>
                <li>
                    <span class="house_ioc_title">可住人数：</span>
                    <span class="house_ioc_context">4人</span>
                </li>
                <li>
                    <span class="house_ioc_title">独立卫生间：</span>
                    <span class="house_ioc_context">1</span>
                </li>
                <li>
                    <span class="house_ioc_title">面积：</span>
                    <span class="house_ioc_context">60平米</span>
                </li>
                <li>
                    <span class="house_ioc_title">发票：</span>
                    <span class="house_ioc_context">提供</span>
                </li>
            </ul>
        </div>
        <div class="house_ss">
            <label>配套设施</label>
            <ul>
                <li>
                    <span class="house_ioc_img"><img src="${pageContext.request.contextPath}/image/broadband.svg"></span>
                    <span>宽带上网</span>
                </li>
                <li>
                    <span class="house_ioc_img"><img src="${pageContext.request.contextPath}/image/wifi.svg"></span>
                    <span>无线WIFI</span>
                </li>
                <li>
                    <span class="house_ioc_img"><img src="${pageContext.request.contextPath}/image/television.svg"></span>
                    <span>电视</span>
                </li>
                <li>
                    <span class="house_ioc_img"><img src="${pageContext.request.contextPath}/image/bath.svg"></span>
                    <span>淋浴</span>
                </li>
                <li>
                    <span class="house_ioc_img"><img src="${pageContext.request.contextPath}/image/air_condition.svg"></span>
                    <span>空调</span>
                </li>
                <li>
                    <span class="house_ioc_img"><img src="${pageContext.request.contextPath}/image/washing.svg"></span>
                    <span>洗衣机</span>
                </li>
                <li>
                    <span class="house_ioc_img"><img src="${pageContext.request.contextPath}/image/fridge.svg"></span>
                    <span>冰箱</span>
                </li>
                <li>
                    <span class="house_ioc_img"><img src="${pageContext.request.contextPath}/image/hot.svg"></span>
                    <span>全天热水</span>
                </li>
                <li>
                    <span class="house_ioc_img"><img src="${pageContext.request.contextPath}/image/kitchen.svg"></span>
                    <span>厨房</span>
                </li>
                <li>
                    <span class="house_ioc_img"><img src="${pageContext.request.contextPath}/image/towel.svg"></span>
                    <span>毛巾</span>
                </li>
            </ul>
        </div>
        <div class="house_zb">
            <label>周边设施</label>
            <div style="text-indent: 2em;">
                附近800米内有超市，餐饮广场，KTV，电影院，医院，银行，加油站。
            </div>
        </div>
        <div class="house_lx">
            <label>乘车路线</label>
            <div style="text-indent: 2em;">
                距离苏州园区高铁站3公里，距离苏州火车站10公里，距离苏州火车北站（高铁站）8公里。公寓靠近园区主干道星湖街，有多路公交。
            </div>
        </div>
        <div class="house_dz">
            <div class="house_map_daaress" >
                <label>房源地址</label>
                <div style="text-indent: 2em;">
                    ${serviceResponse.data.hotelAddress}
                </div>
            </div>
            <div id="house_map"></div>
        </div>
        <div class="house_rule">
            <label>退款规则</label>
            <ul>
                <li>●    入住前1天12:00前如申请退款，订金全额退;</li>
                <li>●    入住前1天12:00之后至入住当天12:00之前，如申请退款，扣除50%订金;</li>
                <li>●    入住后如提前退房，扣除已入住天数房款总额，再扣除未入住天数房款总额的50%;</li>
                <li>●    中午12:00之后默认当天已经入住，申请退款和提前退房时间以系统记录的时间为准。</li>
            </ul>
        </div>
        <div class="house_yq">
            <label>要求及收费</label>
            <p>
                1. 请节约水电资源，离开房间时随手关闭电灯，电视和空调，不需要使用热水时请将热水器关闭。2. 厨房锅具和餐具俱全，使用后务必清洗干净归位，否则额外收取清洗服务费50元/次。3. 请保持房间内整洁有序，垃圾装袋后放门口即可。4.请不要在房间内大声吵闹以防邻居喜静投诉。5.吸烟的朋友务必不要在楼上卧室内吸烟，可在一楼吸烟但要注意开窗及时散味，烟头不要掉在地上避免烫黄地砖。6. 需要带好身份证办理入住。7请保管好自己的随身物品，如有遗留及时联系房东。
                <br/>
                到店支付押金¥300.00元
            </p>
        </div>
        <div class="house_pj">
            <label>房客评价</label>
            <div class="house_evaluate">
                <ul>


                    <c:forEach var="info" items="${evaluateServer.data.list}">
                        <li>
                            <div class="house_fk_img">
                                <img src="${pageContext.request.contextPath}/image/fangke4.jfif">
                            </div>
                            <div class="house_fk">
                                <span>${info.customer.cusNickname} </span>
                                <p> ${info.evaluate.evaluate}</p>
                            </div>
                        </li>
                    </c:forEach>

                </ul>
                <div class="pageInfo">
                    <c:if test="${!empty evaluateServer}">
                        共有<span>${evaluateServer.data.total}</span>条记录，
                        <c:if test="${evaluateServer.data.pageNum !=1}">
                            <a href="${pageContext.request.contextPath}/shop/${id}/dish/page/${evaluateServer.data.pageNum-1}">上一页</a>，
                        </c:if>
                        当前是第<span>${evaluateServer.data.pageNum}</span>页，
                        <c:if test="${evaluateServer.data.pageNum !=evaluateServer.data.pages}">
                            <a href="${pageContext.request.contextPath}/shop/${id}/dish/page/${evaluateServer.data.pageNum+1}">下一页</a>，
                        </c:if>
                        共有<span>${evaluateServer.data.pages}</span>页
                    </c:if>
                    <c:if test="${empty evaluateServer}">

                    </c:if>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    var map = new BMapGL.Map('house_map'); // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(120.62183, 31.330945), 12); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
</script>

<script>
    $(function(){
        //得到当前时间
        var date_now = new Date();
        //得到当前年份
        var year = date_now.getFullYear();
        //得到当前月份
        //注：
        //  1：js中获取Date中的month时，会比当前月份少一个月，所以这里需要先加一
        //  2: 判断当前月份是否小于10，如果小于，那么就在月份的前面加一个 '0' ， 如果大于，就显示当前月份
        var month = date_now.getMonth()+1 < 10 ? "0"+(date_now.getMonth()+1) : (date_now.getMonth()+1);
        //得到当前日子（多少号）
        var date = date_now.getDate() < 10 ? "0"+date_now.getDate() : date_now.getDate();
        //设置input标签的max属性
        $("#newtoday").attr("min",year+"-"+month+"-"+date);
    })
</script>

<script>



    var i=0;
    var timer;
    $(function(){
// $("#igs").hover(function(){


// $(".btn").show();
// },function(){
// $(".btn").hide();
// })

        $(".").eq(0).show().siblings().hide();

        ShowTime();

        $(".tab").hover(function(){
            i = $(this).index();
            Show();
            clearInterval(timer); //清除轮播
        },function(){
            ShowTime();
        })

        $(".btn1").click(function(){
            clearInterval(timer);
            if (i == 0) {
                i = 6;
            }
            i--;
            Show();
            ShowTime();
        })
        $(".btn2").click(function(){
            clearInterval(timer);
            if(i == 5){
                i = -1;
            }
            i++;
            Show();
            ShowTime();
        })
    });
    function Show(){
        $(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);
        $(".tab").eq(i).addClass("bg").siblings().removeClass("bg");
    }

    function ShowTime(){
        timer = setInterval(function(){
            i++;
            if (i == 6) {
                i =0;
            }
            Show();
        },2000);
    }
</script>